<!--20210312  zaq  修改data中user结构，完善登录方法-->
<!--20210312  zaq  与后端进行登录调试-->
<!--20210318  zaq  修改data中user列，与后端保持一致-->
<!--20210324  zaq  修改登录框布局，暂时注释与后端交互部分，登录成功后弹出导航提示-->
<!--20210421  zaq  修改ruleForm数据格式，新增合法性判断-->
<!--20210502  zaq  解决Missing required prop报错问题，定义loginflag值,修改弹窗信息-->

<template>
  <div id="window" class="window">
    <div id="login" class="login"
      loginflag="loginflag">
      <p style="text-align: center;
      font-size: 20px;
      font-style: italic;
      color: white">登录</p>
      <p v-if="loginflag==='1'">1</p>
      <p v-else>0</p>
      <el-form :model="user" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="name">
          <el-input style="width: 90%;" v-model.number="user.uLogin"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input style="width: 90%" type="password" v-model="user.uPwd" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item style="text-align: center">
          <el-button v-on:click="submitForm('ruleForm')">登录</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button type="text" @click="dialogVisible = true">没有账号？点击注册</el-button>
        </el-form-item>
      </el-form>


      <!--    注册页面-->
      <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
      <span>
        <el-form :model="signupRuleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="name">
                <el-input v-model.number="signupRuleForm.name"></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="pass">
                <el-input style="width: 90%" type="password" v-model="signupRuleForm.pass" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="确认密码" prop="checkPass">
                <el-input style="width: 90%" type="password" v-model="signupRuleForm.checkPass"
                              autocomplete="off"></el-input>
            </el-form-item>
    </el-form>
      </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="signup('sinupRuleForm')">注册</el-button>
          <el-button @click="resetForm('sinupRuleForm')">重置</el-button>
      </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  props: {
    loginflag:{
      type:String,
      required:true
    }
  },
  data() {
    var checkName = (rule, value, callback) => {
      //合法性判断
      if (!value) {
        return callback(new Error('用户名不能为空'));
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      user:{
        uId:'1',//用户id
        uLogin:'admin',//用户名
        uName:'admin',//用户昵称
        uPwd:'',//密码
        uPlanet:'一颗大傻蛋',//小星球名字
        uCreatedate:'',//用户创建日期
        uBirthday:'',//生日
        uSex:'',//性别
        uStatus:'',//个性签名
        uAdmin:'',//管理员标志
        delete:''//删除标志
      },
      ruleForm: {
        pass: [
          {validator: validatePass, trigger: 'blur'}
        ],
        checkPass: [
          {validator: validatePass2, trigger: 'blur'}
        ],
        name: [
          {validator: checkName, trigger: 'blur'}
        ]
      },
      signupRuleForm:{

      },
      rules: {
        pass: [
          {validator: validatePass, trigger: 'blur'}
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        name: [
          {validator: checkName, trigger: 'blur'}
        ]
      },
      dialogVisible: false
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    //登录
    submitForm(formName) {
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      console.log(this.user)
      const i_user=this.user

      //向父组件App.vue传值，'1'表示成功登录
      this.$emit('changeLoginFlag','1')

      //用户名密码检查
      // axios({
      //   method:'post',
      //   url: "http://localhost:9090/user/login",
      //   headers: {
      //     'Content-Type': 'application/json;charset=UTF-8'
      //   },
      //   data: i_user,
      //   //ajax
      //   // dataType: "JSON",
      //   // type: "post",
      //   // contentType: ‘application/json;charset=UTF-8‘, //不能加
      //   success: function (msg) {
      //     console.log(msg)
      //   }
      // }).then(function (resp){
      //   console.log(resp)
      // })
      //     .catch(function (error){
      //       console.log(error)
      //     })
      //   } else {
      //     this.$message('????');
      //     console.log('error submit!!');
      //     return false;
      //   }
      // });

      //成功后弹窗提示
      this.$notify({
        title: '登录成功',
        message: '欢迎使用 一颗小星球 系统',
        duration: 0
      });
      this.$notify({
        title: '系统信息',
        message: '系统尚未完善',
        duration: 0,
        offset: 100
      });
      this.$notify({
        title: '系统信息',
        message: '上一次更新时间为2021-5-2',
        duration: 0,
        offset: 200
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    signup(formName) {
      let name = '1';
      let pass = '1';
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //用户名密码检查
      if (1) {
        this.$message('输入正确');
        //跳转
        //重新进入登陆页面
        this.$router.push({
          // path: '/main',
          name: '/',
          params:{
            key:'key',
            user:{
              id:'admin',
              name:'章张',
              planet:'大傻蛋'
            }
          }
        });
      } else {
        this.$message('用户名或密码错误');
      }
      //   } else {
      //     this.$message('????');
      //     console.log('error submit!!');
      //     return false;
      //   }
      // });
    }
  },



}
</script>

<style scoped>
.login {
  width: 500px;
  vertical-align: center;
  /*float:right;*/
  margin: 0;
  padding: 0;
}

.window{
  display: flex;
  /*position: fixed;*/
  right: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  font-size: 0;
}

#login {
  background-color: rgba(0, 0, 0, 0.2);
  width: 500px;
  /*float: bottom;*/
}
</style>